<template>
    <div class="person">
        <el-form ref="formRef" :model="data.user" label-width="80px" style="padding: 20px 30px 10px 0">
        <el-form-item prop="avatar" label="头像">
          <el-upload
            action="http://localhost:8080/files/upload"
            :headers="{ token: data.user.token }"
            :on-success="handleSearch"
            list-type="picture"
          >
            <el-button type="primary">上传头像</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item prop="username" label="账号">
          <el-input v-model="data.user.username" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="name" label="名称">
          <el-input v-model="data.user.name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="phone" label="电话">
          <el-input v-model="data.user.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="data.user.email" autocomplete="off" />
        </el-form-item>
      </el-form>
        <div class="footer">
          <el-button @click="data.formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
    </div>
   
</template>
<script setup>
import { reactive } from "vue";
import request from "@/utils/request";
import { ElMessage } from 'element-plus'
const emit = defineEmits(['updateUser'])

const data = reactive({
  user: JSON.parse(localStorage.getItem("code_user")||"{}")
})
const handleSearch=(res)=>{
  data.form.avatar=res.data
}
const save=()=>{
    let url
    if (data.user.role === 'ADMIN') {
        url = '/admin/update'
    }
    if (data.user.role === 'USER') {
        url = '/user/update'
    }
    request.post(url,data.user).then((res)=>{
        if (res.code === '200') {
            ElMessage.success('更新成功')
            localStorage.setItem("code_user", JSON.stringify(data.user))
            emit('updateUser')
        }
    })
}
</script>
<style scoped lang="scss">
.person{
    width: 50%;
    height: 50%;
    background-color: #F0F2F5;

    .footer{
        text-align: center;
        padding-bottom: 10px;
    }
}
</style>